<template>
    <div>
      <div class="imgDiv">
        <img :src="getImgUrl(expert.imgsrc)">
      </div>
      <div>
      {{expert.name}}
      </div>
      <!--<tabBar></tabBar>-->
    </div>
</template>

<script>
  import api from "../../../../axios/api"
  import  tabBar from '@/components/front/tabBar'
    export default {
        name: "Expert",
      components:{
        tabBar
      },
       data(){
          return {
            experts : [],//总的专家集合
            currentPage : 1,
            //新查询到的专家集合，也就是下一页
            currentExperts:[],
            expert : null//查出的专家
          }
       },
      methods:{
        getImgUrl: function (imgsrc) {
          return "../../../static/images/experts/" + imgsrc;
        },
        getExpertByEId: function (eid) {
          //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面

          //模拟查询数据库 一次取出2页模拟数据，两页数据存放到 this.experts中
          for(;this.currentPage <=1;this.currentPage++) {
            api.setDataFromAxios("/experts?currPage=" + this.currentPage + "&pageSize=8", null, "get")
              .then(dto => {

                this.currentExperts = dto.tList;
                for (let i = 0; i < this.currentExperts.length; i++) {
                  this.experts.push(this.currentExperts[i]);//把当前的专家集合中的专家都添加到总的专家集合
                }
                console.log(this.experts)
                console.log("------------9-------------")
                for(var i=0;i<this.experts.length;i++){
                  if (this.experts[i].eid == eid){
                    this.expert = this.experts[i];

                    console.log(this.expert);
                    return;
                  }
                }
              });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax
          }
          //模拟结束


        },
      },
      created(){
        var eid = this.$route.params.eid;
        this.getExpertByEId(eid);
      },
      mounted() {
        let windowWidth = document.documentElement.clientWidth;//获取屏幕高度
        if(windowWidth>768){//这里根据自己的实际情况设置容器的高度
          this.wrapperHeight = document.documentElement.clientHeight - 105;
        }else{
          this.wrapperHeight = document.documentElement.clientHeight - 80;
        }
      }
    }
</script>

<style scoped>
  .imgDiv{width: 100%;
    height: 300px;}
  .imgDiv img{
    width: 90%;
    height: 100%;
  }
</style>
